<template>
  <el-dialog
    append-to-body
    title="修改"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <vxe-form
      :data="form"
      :items="formConfig.items"
      :rules="formConfig.rules"
      :title-align="formConfig.titleAlign"
      title-colon
      :title-width="formConfig.titleWidth"
      @submit="submit"
    >
      <template #dclass>
        <vxe-select
          v-model="form.dclass"
          clearable
          filterable
          :options="dclassOptions"
          placeholder="请选择"
        />
      </template>
    </vxe-form>
  </el-dialog>
</template>

<script>
  import { deepClone } from '@/utils'
  import { updateSoil } from '@/api/device'
  export default {
    data() {
      return {
        dialogVisible: false,
        dclassOptions: [
          { label: '高', value: 1 },
          { label: '中', value: 2 },
          { label: '低', value: 3 },
        ],
        form: {
          name: '',
          descri: '',
          picture: '',
          sl: '',
          fl: '',
          nl: '',
          unit_weight: '',
          field_capacity: '',
          water_content: '',
          wilting_coefficient: '',
          yjz: '',
          n: '',
          p: '',
          k: '',
          flstep: '',
        },
        formConfig: {
          titleWidth: 110,
          titleAlign: 'right',
          items: [
            {
              field: 'name',
              title: '名称',
              span: 12,
              itemRender: {
                name: '$input',
                props: { placeholder: '名称', clearable: true },
              },
            },
            {
              field: 'flstep',
              title: '肥力等级',
              span: 12,
              slots: { default: 'dclass' },
            },
            {
              field: 'sl',
              title: '砂粒',
              span: 8,
              itemRender: {
                name: '$input',
                props: { placeholder: '砂粒', type: 'number', clearable: true },
              },
            },
            {
              field: 'fl',
              title: '粉粒',
              span: 8,
              itemRender: {
                name: '$input',
                props: { placeholder: '粉粒', type: 'number', clearable: true },
              },
            },
            {
              field: 'nl',
              title: '黏粒',
              span: 8,
              itemRender: {
                name: '$input',
                props: { placeholder: '黏粒', type: 'number', clearable: true },
              },
            },
            {
              field: 'unit_weight',
              title: '容重',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '容重',
                  clearable: true,
                },
              },
            },
            {
              field: 'field_capacity',
              title: '田间持水率',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '田间持水率(cm3/cm3)',
                  clearable: true,
                },
              },
            },
            {
              field: 'water_content',
              title: '饱和含水率',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '饱和含水率(cm3/cm3)',
                  clearable: true,
                },
              },
            },
            {
              field: 'wilting_coefficient',
              title: '凋萎系数',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '凋萎系数(%)',
                  clearable: true,
                },
              },
            },
            {
              field: 'yjz',
              title: '有机质',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '有机质',
                  clearable: true,
                },
              },
            },
            {
              field: 'n',
              title: '碱解氮',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '碱解氮(%)',
                  clearable: true,
                },
              },
            },
            {
              field: 'p',
              title: '有效磷',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '有效磷(%)',
                  clearable: true,
                },
              },
            },
            {
              field: 'k',
              title: '速效钾',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '速效钾(%)',
                  clearable: true,
                },
              },
            },
            {
              field: 'descri',
              title: '介绍',
              span: 24,
              itemRender: {
                name: '$input',
                rows: 4,
                props: {
                  type: 'textarea',
                  placeholder: '速效钾(%)',
                  clearable: true,
                },
              },
            },
            {
              span: 24,
              align: 'left',
              className: 'pl110',
              itemRender: {
                name: '$buttons',
                children: [
                  {
                    props: {
                      type: 'submit',
                      content: '提交',
                      icon: 'vxe-icon-search',
                      status: 'primary',
                    },
                  },
                  {
                    props: {
                      type: 'reset',
                      content: '重置',
                      icon: 'el-icon-document',
                    },
                  },
                ],
              },
            },
          ],
          rules: {
            name: [{ required: true, message: '请输入名称' }],
          },
        },
      }
    },
    methods: {
      show(row) {
        this.dialogVisible = true
        this.form = deepClone(row)
      },
      async submit() {
        const { msg } = await updateSoil(this.form.id, this.form)
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
        this.dialogVisible = false
        this.$emit('getSoils')
      },
    },
  }
</script>

<style lang="scss" scoped></style>
